@automattic/wordpress-external-dependencies-plugin
This webpack plugin serves two purposes:
- Externalize dependencies that are available as script dependencies on modern WordPress sites.
- Add a JSON file for each entrypoint that declares the WordPress script dependencies for the
entrypoint.
This allows JavaScript bundles produced by webpack to leverage WordPress style dependency sharing
without an error-prone process of manually maintaining a dependency list.
Consult the webpack website for additional information on webpack concepts.
Usage
Webpack
Use this plugin as you would other webpack plugins:
const WordPressExternalDependenciesPlugin = require( '@automattic/wordpress-external-dependencies-plugin' );
module.exports = {
plugins: [
new WordPressExternalDependenciesPlugin(),
]
}
Each entrypoint in the webpack bundle will include JSON file that declares the WordPress script dependencies that should be enqueued.
For example:
// Source file entrypoint.js
import { Component } from '@wordpress/element';
// Webpack will produce the output output/entrypoint.js
/* bundle JS output */
// Webpack will also produce output/entrypoint.deps.json declaring script dependencies
['wp-element']
WordPress
Enqueue your script as usual and read the script dependencies dynamically:
$script_path = 'path/to/script.js';
$script_deps_path = 'path/to/script.deps.json';
$script_dependencies = file_exists( $script_deps_path )
? json_decode( file_get_contents( $script_deps_path ) )
: array();
$script_url = plugins_url( $script_path, __FILE__ );
wp_enqueue_script( 'script', $script_url, $script_dependencies );